<!-- 简化的JSON渲染器使用示例 -->
<template>
  <view class="json-simple-page">
    <s-json-renderer 
      :config="pageConfig"
      @componentEvent="onComponentEvent"
    />
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import SJsonRenderer from '@/sheep/components/s-json-renderer/s-json-renderer.vue';

  // 页面配置数据
  const pageConfig = ref({
    "page": {
      "description": "租车平台首页",
      "backgroundColor": "#f5f6fa"
    },
    "components": [
      {
        "id": "SearchNavbar",
        "property": {
          "searchPlaceholder": "搜索车型",
          "style": {
            "position": "absolute",
            "top": "20rpx",
            "left": "20rpx",
            "right": "20rpx",
            "zIndex": 999
          }
        }
      },
      {
        "id": "Carousel",
        "property": {
          "autoplay": true,
          "interval": 3000,
          "indicator": "custom",
          "items": [
            {
              "imgUrl": "https://picsum.photos/750/500?random=1&text=轮播图1",
              "title": "轮播图1",
              "url": "/pages/index/rental"
            },
            {
              "imgUrl": "https://picsum.photos/750/500?random=2&text=轮播图2", 
              "title": "轮播图2",
              "url": "/pages/goods/list"
            }
          ],
          "style": {
            "height": "400rpx",
            "marginBottom": "20rpx"
          }
        }
      },
      {
        "id": "MenuSwiper",
        "property": {
          "list": [
            {
              "title": "租车",
              "emoji": "🚗",
              "bgColor": "#ff7675",
              "url": "/pages/index/rental"
            },
            {
              "title": "驾考",
              "emoji": "📖", 
              "bgColor": "#74b9ff",
              "url": "/pages/index/index"
            },
            {
              "title": "商城",
              "emoji": "🛒",
              "bgColor": "#00b894",
              "url": "/pages/index/category"
            }
          ],
          "style": {
            "padding": "20rpx"
          }
        }
      }
    ]
  });

  // 组件事件处理
  const onComponentEvent = (event) => {
    console.log('组件事件:', event);
    
    // 根据事件类型处理
    switch (event.type) {
      case 'search':
        uni.showToast({
          title: '搜索功能',
          icon: 'none'
        });
        break;
      case 'menuClick':
        uni.showToast({
          title: `点击了${event.data.title}`,
          icon: 'none'
        });
        break;
      case 'carouselItemClick':
        uni.showToast({
          title: `点击了${event.data.title}`,
          icon: 'none'
        });
        break;
      default:
        console.log('未处理的事件类型:', event.type);
    }
  };

  // 模拟从后端API获取配置
  const loadConfigFromAPI = async () => {
    try {
      // 这里可以调用后端API
      // const response = await sheep.$api.page.getConfig();
      // pageConfig.value = response.data;
      
      console.log('从API加载配置成功');
    } catch (error) {
      console.error('加载配置失败:', error);
    }
  };

  // 页面加载时获取配置
  onMounted(() => {
    loadConfigFromAPI();
  });
</script>

<style lang="scss" scoped>
.json-simple-page {
  min-height: 100vh;
  background: #f5f6fa;
}
</style>

